import React, { useEffect, useRef, useState } from 'react';
import { AudioOutlined } from '@ant-design/icons';
import { Input, Button } from 'antd';
export default function Bd() {
  const BMapGL = window.BMapGL;
  const [searchText, setSearchText] = useState('');
  const [result, setResult] = useState([]);
  const [mySearch,setMySearch]=useState(null)

  useEffect(() => {
    var map = new BMapGL.Map("container");
    var point = new BMapGL.Point(120.264370, 30.305488);
    // 设置地图展示级别(定位点，缩放程度)
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom();     //开启鼠标滚轮缩放

    // map.setHeading(64.5);   //设置地图旋转角度
    // map.setTilt(73);       //设置地图的倾斜角度

    // map.setMapType(window.BMAP_EARTH_MAP);  //切换地图类型为地球模式

    var scaleCtrl = new BMapGL.ScaleControl();  // 添加比例尺控件
    map.addControl(scaleCtrl);
    var zoomCtrl = new BMapGL.ZoomControl({
      anchor: window.BMAP_ANCHOR_TOP_RIGHT,// 设置控件的位置右上角
      offset: new BMapGL.Size(20, 50) // 设置控件的偏移量 水平和垂直
    });  // 添加缩放控件
    map.addControl(zoomCtrl);
    var cityCtrl = new BMapGL.CityListControl();  // 添加城市列表控件
    map.addControl(cityCtrl);

    // 自定义地图配色 78a8a8dd88e9fe28c93fd586dbb2b70c
    map.setMapStyleV2({
      styleId: '78a8a8dd88e9fe28c93fd586dbb2b70c'
    });

    // 添加点标记
    var point = new BMapGL.Point(120.264370, 30.305488);
    var marker = new BMapGL.Marker(point);        // 创建标注   
    map.addOverlay(marker);                     // 将标注添加到地图中
    marker.addEventListener("click", function () {
      alert("您点击了标注");
    });


    // 添加线
    var polyline = new BMapGL.Polyline([
      new BMapGL.Point(120.264370, 30.305488),
      new BMapGL.Point(120.364370, 30.805488),
      new BMapGL.Point(120.664370, 30.305488),
      new BMapGL.Point(120.764370, 30.805488),
      new BMapGL.Point(121.064370, 30.305488),
    ], { strokeColor: "blue", strokeWeight: 2, strokeOpacity: 0.5 });
    map.addOverlay(polyline);

    polyline.addEventListener('click', () => {
      alert("您点击了线");
    })

    // 创建高度点所在位置点
    var point = new BMapGL.Point(120.564370, 30.305488);
    // 创建带高度的点，8000m
    var marker3d = new BMapGL.Marker3D(point, 8000, {
      size: 50,
      shape: window.BMAP_SHAPE_CIRCLE,
      fillColor: '#f66',
      fillOpacity: 0.6
    });
    // 将点添加到地图上
    map.addOverlay(marker3d);


    var options = {
      onSearchComplete: function (results) {
        // 判断状态是否正确
        if (local.getStatus() == window.BMAP_STATUS_SUCCESS) {
          var s = [];
          for (var i = 0; i < results.getCurrentNumPois(); i++) {
            s.push(results.getPoi(i).title + ", " + results.getPoi(i).address);
          }
          setResult(s)
          // console.log(s);
          
        }
      }
    };


    var local = new BMapGL.LocalSearch(map,  {
		renderOptions: {map: map, panel: "r-result"}
	});

    // local.search("公园");
    setMySearch(local)

  }, [])
  // 点击搜索得到结果
  const searchClick = () => {
    mySearch.search(searchText)
  }
  // 实现搜索得到结果
  return <div>
    <Input
      placeholder="input search text"
      allowClear
      enterButton="Search"
      size="large"
      style={{ margin: "20px 10px", width: "50%" }}
      onChange={(e) => [
        setSearchText(e.target.value)
      ]}
    />
    <Button onClick={() => { searchClick() }} style={{ padding: 10 }}>点击搜索</Button>
    <div id="container" style={{ width: 800, height: 350, padding: 20 }}>
    </div>
    {/* <div id='myResult' >
      {result.map(item => <div key={item}>{item}</div>)}
    </div> */}
    <div id="r-result"></div>
  </div>

}
